@import "../vars";

$default-color: $--color-info;
$default-color-d: $--color-info;
.xdh-tree {
  .el-tree {
    // 最左边折叠/展开图标 （默认状态）
    .el-tree-node__expand-icon {
      position: relative;
      transform: none;
      transition: none;
      color: $default-color;
      &:before {
        content: '+';
        display: inline-block;
        border: 1px solid $default-color;
        border-radius: 2px;
        text-align: center;
        width: 12px;
        font-size: 12px;
      }
    }
    // 最左边折叠/展开图标 （展开状态）
    .el-tree-node__expand-icon.expanded {
      transform: none;
      transition: none;
      &:before {
        content: '-';
      }
    }
    // 最左边折叠/展开图标 （无扩展类型） 需要在元素中间添加一条水平虚线（用作延长）
    .el-tree-node__expand-icon.is-leaf {
      &:before {
        content: '';
        display: inline-block;
        height: 14px;
        width: 14px;
        border: none;
        background: no-repeat;
        background-image: repeating-linear-gradient(90deg, $default-color 0, $default-color 2px, transparent 2px, transparent 4px);

        background-position: 0 calc(50% + 1px);
        background-size: 100% 1px;
      }
    }
    // checkbox的 边框
    /*label.el-checkbox .el-checkbox__inner{
      border: 1px solid $default-color;
    }*/
    div[role=group] {
      position: relative;
      // 纵向虚线 （树节点整体背景 用 重复纵向虚线）
      .el-tree-node {
        background-image: linear-gradient(white 50%, transparent 0),
        linear-gradient(90deg, transparent 0, transparent 12px, $default-color-d 13px, transparent 13px, transparent 100%);
        background-size: 18px 6px;

        // 树状的内容展示区域 设置bg-image为白色遮住部分虚线（展示当前层级内容前面的纵向虚线）
        .el-tree-node__content {
          background-clip: content-box;
          background-image: linear-gradient(to right, white 0, white 100%); // 用linear-gradient因为 bg-img才可以用bg-clip，bg-color不可以
        }
        // 还原 hover变色的状态效果
        .el-tree-node__content:hover {
          background-image: linear-gradient(to right, #f0f7ff 0, #f0f7ff 100%);
        }
      }
      // 每个树节点 前面的 虚线
      .el-tree-node__expand-icon::after {
        content: '';
        position: absolute;
        display: block;
        width: 13px;
        left: -6px;
        top: 0px;
        bottom: 0;
        background: no-repeat;
        background-color: transparent;
        background-image: repeating-linear-gradient(90deg, $default-color 0, $default-color 2px, transparent 2px, transparent 4px),
        linear-gradient(transparent 0, transparent 100%),
        linear-gradient(transparent 0, transparent 100%);
        background-position: 0 50%, 0 0, 0 50%;
        background-size: 100% 1px, 1px 50%, 1px 100%;
      }
      .el-tree-node:nth-last-child(1) {
        background-image: none;
        .el-tree-node__expand-icon::after {
          background-image: repeating-linear-gradient(90deg, $default-color 0, $default-color 2px, transparent 2px, transparent 4px),
          repeating-linear-gradient($default-color 0, $default-color 2px, transparent 2px, transparent 4px),
          linear-gradient(white 0, white 100%);
          background-position: 0 50%, 0 0, 0 50%;
          background-size: 100% 1px, 1px 50%, 1px 100%;
        }
      }
    }
  }
}
